<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="address_dept_category">
    <div class="_dept-children">
        <div class="_dept-each" v-for="dept in list">
            <div class="_choosed" v-show="checkChoosed(dept)"></div>
            <div class="_dept-content" @click="changeChoosed(dept)">
                <img class="_toggle-cube" src="/images/components/add_member/opened.png" alt="" v-show="dept.toggle == 2" v-if="dept.sub_dept && dept.sub_dept.length > 0" @click="toggleChange(dept)">
                <img class="_toggle-cube" src="/images/components/add_member/not-opened.png" alt="" v-show="dept.toggle != 2" v-if="dept.sub_dept && dept.sub_dept.length > 0" @click="toggleChange(dept)">
                <img class="_dept-file" src="/images/components/add_member/ic-file1.png" alt="">
                <span>{{dept.deptName}}</span>
            </>
            <deptcategory :list="dept.sub_dept" :parent="dept" v-if="dept.sub_dept && dept.sub_dept.length > 0" v-show="dept.toggle == 2"></deptcategory>
        </div>
    </div>
</script>
<script>
    var deptCategory = {
        template: "#address_dept_category",
        name: "deptcategory",
        props: ["list", "parent"],
        data: function() {
            return {

            }
        },
        computed: {

        },
        methods: {
            checkChoosed: function(dept) {
                return dept.id == state.choosedDept;
                event.stopPropagation();
            },
            changeChoosed: function(dept) {
                state.choosedDept = dept.id;
                this.$dispatch("deptQuery", dept.id);
                event.stopPropagation();
            },
            // 切换子节点的展开与收起
            toggleChange: function(dept) {
                event.stopPropagation();
                if (dept.toggle == 1) {
                    dept.toggle = 2;
                    return;
                }
                dept.toggle = 1;
            },
            // 判断他的父节点是不是应该和当前点击的节点一样的状态
            checkParent: function() {
                for (var i = 0; i < this.list.length; i++) {
                    if (!this.list[i].checked) {
                        if (this.parent) {
                            this.parent.checked = false;
                            this.$dispatch("parentRecursion");
                        }
                        return;
                    }
                }
                if (this.parent) { // 让父节点收到消息并修改自身状态
                    this.parent.checked = true;
                    this.$dispatch("parentRecursion");
                }
            },
            // 所有的子节点需要保持和当前点击的节点一样的状态
            checkSub: function(dept) {
                var bool = dept.checked;
                function setChecked(list) { //
                    if (Array.isArray(list)) {
                        for (var i = 0; i < list.length; i++) {
                            setChecked(list[i]);
                        }
                    } else {
                        list.checked = bool;
                        if (list.sub_dept && list.sub_dept.length > 0) {
                            setChecked(list.sub_dept);
                        }
                    }
                }
                setChecked(dept);
            },
            changeChecked: function(dept) {
                dept.checked = !dept.checked;
                this.checkParent(); // 判断他的父节点是不是应该和当前点击的节点一样的状态
                this.checkSub(dept); // 所有的子节点需要保持和当前点击的节点一样的状态
                event.stopPropagation();
            }
        },
        events: {
            parentRecursion: function() {
                for (var i = 0; i < this.list.length; i++) {
                    if (!this.list[i].checked) {
                        if (this.parent) {
                            this.parent.checked = false;
                        }
                        return true;
                    }
                }
                if (this.parent) { // 让父节点收到消息并修改自身状态
                    this.parent.checked = true;
                }
                return true;
            }
        },
        ready: function() {

        }
    }
</script>
